<template>
  <div>
    <el-card class="tab">
      <div>
        <el-input v-model="name" style="width: 400px; margin-left: 330px" :value="parameter.title"  placeholder="搜索心仪的职位">
          <el-button slot="append" icon="el-icon-search" @click="getJobs"></el-button>
        </el-input>
        <div v-for="(v,k) in screen" :key="k" :label="k" :name="k">
          <div style="margin-top: 5px"> <span>{{ v.name }}</span>
          <el-button v-for="(v1,k1) in v.value" size="small" plain :key="k1" :label="k1"
                     style="margin-right:10px; width: 110px" @click="changeB(k, v1)">
            <span>{{v1}}</span>
          </el-button >
          </div>
        </div>
        <div style="margin-top: 30px">
        <span v-if="parameter.address">工作地址： <el-tag closable size="small" @close="isShowTag(0)"> {{ parameter.address }} </el-tag> </span>
        <span v-if="parameter.walfare">福利待遇： <el-tag closable size="small" @close="isShowTag(1)"> {{ parameter.walfare }} </el-tag> </span>
        <span v-if="parameter.workYear">工作经验：<el-tag closable size="small" @close="isShowTag(2)"> {{ parameter.workYear }} </el-tag> </span>
        <span v-if="parameter.empltype">工作方式：<el-tag closable size="small" @close="isShowTag(3)"> {{ parameter.empltype }} </el-tag> </span>
          <span v-if="parameter.type">工作类型： <el-tag closable size="small" @close="isShowTag(4)"> {{ parameter.type }} </el-tag> </span>
        <span v-if="parameter.edu">学历要求： <el-tag closable size="small" @close="isShowTag(5)"> {{ parameter.edu }} </el-tag> </span>
        </div>
      </div>
    </el-card>
    <el-card class="nojob" v-if="!havejob">暂时没有该岗位信息</el-card>
    <el-card v-if="havejob" v-for="(item, key) in list" :key="key" class="jobcard">
      <div  @click="findDetail(item.id)">
     <img class="jobavatar" src="../assets/company.jpg"/>
     <div class="introduce">
       <p>{{item.title}}</p>
       <p>{{item.empltype}}<span>|</span>{{item.workYear}}<span>|</span>{{item.type}}</p>
       <p>城市：{{item.city}}<span>|</span>地址：{{item.address}}</p>
     </div>
      </div>
    </el-card>
    <el-pagination
      v-if="havejob"
      :page-size="parameter.page.size"
      :pager-count="11"
      layout="prev, pager, next"
      :total="parameter.page.total"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>
<style>
.nojob {
  margin: 20px auto auto auto;
}
.jobcard {
  width: 80%;
  margin: 20px auto auto auto;
}
.jobavatar {
  float: left;
  width: 126px;
  height: 110px;
  margin: auto 14px 20px auto;
}
.introduce {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.introduce p {
  font-size: 18px;
  margin-bottom: 14px;
}
.tab {
  width: 80%;
  text-align: left;
  margin-left: 10%
}
</style>
<script>
import fetch from '../api/fetch'

export default {
  data () {
    return {
      screen: [
        {
          name: '工作地址：',
          value: ['北京', '上海', '广州', '深圳', '苏州', '重庆']
        },
        {
          name: '福利待遇：',
          value: ['五险一金', '包住', '员工旅游', '节日福利', '出国游', '全勤奖', '年底双薪', '绩效奖金']
        },
        {
          name: '工作经验：',
          value: ['不限', '无经验', '一年以下', '1-3年', '3-5年', '5-10年']
        },
        {
          name: '工作方式：',
          value: ['全职', '实习', '兼职/临时']
        },
        {
          name: '工作类型：',
          value: ['互联网/IT', '销售', '管理', '人力资源', '客服', '土木', '财务']
        },
        {
          name: '学历要求：',
          value: ['不限', '中专', '大专', '本科']
        }
      ],
      parameter: {
        address: '',
        walfare: '',
        workYear: '',
        empltype: '',
        type: '',
        edu: '',
        title: '',
        page: {
          count: 1,
          size: 9,
          total: 2000
        }
      },
      content: localStorage.getItem('content'),
      list: [],
      havejob: false
    }
  },
  mounted () {
    this.getJobs()
  },
  methods: {
    handleCurrentChange (val) {
      console.log(`每页 ${val} 条`)
      this.parameter.page.count = val
      this.getJobs()
    },
    isShowTag (k) {
      switch (k) {
        case 0:
          this.parameter.address = ''
          break
        case 1:
          this.parameter.walfare = ''
          break
        case 2:
          this.parameter.workYear = ''
          break
        case 3:
          this.parameter.empltype = ''
          break
        case 4:
          this.parameter.type = ''
          break
        case 5:
          this.parameter.edu = ''
          break
      }
    },
    getJobs () {
      fetch
        .getJobs(this.parameter)
        .then(res => {
          if (res.status === 200) {
            console.log('test11', res)
            if (res.data.total > 0) {
              console.log('test22', res.data.records)
              this.list = res.data.records
              this.havejob = true
              this.parameter.page.total = res.data.total
            } else {
              this.havejob = false
            }
          }
        })
        .catch(e => {
          console.log(e)
        })
    },
    findDetail (id) {
      localStorage.setItem('jobId', id)
      this.$router.push({name: 'jobInfo'})
    },
    changeB (k, v) {
      console.log('test-', k, 'test-', v)
      switch (k) {
        case 0:
          if (this.parameter.address !== v) {
            this.parameter.address = v
          } else {
            this.parameter.address = ''
          }
          break
        case 1:
          if (this.parameter.walfare !== v) {
            this.parameter.walfare = v
          } else {
            this.parameter.walfare = ''
          }
          break
        case 2:
          if (this.parameter.workYear !== v) {
            this.parameter.workYear = v
          } else {
            this.parameter.workYear = ''
          }
          break
        case 3:
          if (this.parameter.empltype !== v) {
            this.parameter.empltype = v
          } else {
            this.parameter.empltype = ''
          }
          break
        case 4:
          if (this.parameter.type !== v) {
            this.parameter.type = v
          } else {
            this.parameter.type = ''
          }
          break
        case 5:
          if (this.parameter.edu !== v) {
            this.parameter.edu = v
          } else {
            this.parameter.edu = ''
          }
          break
      }
      this.getJobs()
    }
  }
}
</script>
